<template>
<!-- 该上传组件主要用于直播助手 -->
  <div class="mall-upload">
    <el-upload
      ref="elUpload"
      action=""
      list-type="picture-card"
      :auto-upload="true"
      :file-list="nowFileList"
      :http-request="uploadBefore"
      :limit="limit"
      :multiple="multiple"
      :class="{ 'notShow' : key.length === limit }"
    >
      <i slot="default" class="el-icon-plus" />
      <div slot="file" slot-scope="{file}">
        <img v-if="filterImgType.indexOf(file.name.split('.')[file.name.split('.').length - 1]) !== -1" class="el-upload-list__item-thumbnail" :src="file.url" alt="">
        <img v-else src="../../assets/common/file.png" alt="" class="file-img">
        <div v-if="nameShow" class="file-name overflow1" :title="file.name">{{ file.name }}</div>
        <span class="el-upload-list__item-actions">
          <span
            v-if="!disabled"
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in" />
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete" />
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" :close-on-click-modal="false" :append-to-body="true">
      <div style="text-align: center">
        <img style="width:300px;height:300px" :src="dialogImageUrl" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
// import { getPolicy } from '@/api/common'
import { uploadWechatMaterial } from '@/api/shoppingMall/broad_casting';

export default {
  props: {
    multiple: {
      required: false,
      type: Boolean,
      default: false
    },
    disabled: {
      required: false,
      type: Boolean,
      default: false
    },
    fileList: {
      required: false,
      type: Array,
      default: () => []
    },
    nameShow: {
      required: false,
      type: Boolean,
      default: true
    },
    limit: {
      required: false,
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
      nowFileList: [],
      key: [],
      filterImgType: ['jpg', 'jpeg', 'png', 'icon', 'gif', 'bmp', 'JPG', 'JPEG', 'PNG', 'ICON', 'GIF', 'BMP']
    }
  },
  mounted() {
    const arr = []
    this.fileList.forEach(item =>
      arr.push({
        url: item.url,
        name: item.url.split('.com/')[1],
        uid: 1
      })
    )
    this.nowFileList = JSON.parse(JSON.stringify(arr))
    this.key = JSON.parse(JSON.stringify(arr))
  },
  methods: {
    uploadBefore(file) {
      const pattern=/[`~!@#$^&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g;
      if(pattern.test(file.file.name.slice(0,file.file.name.lastIndexOf('.')))){
        this.$refs.elUpload.clearFiles()
        this.$message.error('图片名称有特殊字符，无法上传！')
        return
      }
      const formData = new FormData()
      formData.append('file', file.file)
      uploadWechatMaterial(formData).then(response => {
        this.$message.success('上传成功!')
        this.$emit('getmediaId', response)
      })
    },
    handleRemove(file) {
      this.key = this.key.filter(item => item.uid !== file.uid)
      this.nowFileList = JSON.parse(JSON.stringify(this.$refs.elUpload.uploadFiles))
      this.nowFileList = this.nowFileList.filter(item => item.uid !== file.uid)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss">
.mall-upload {
  .file-img {
    width: 100%;
  }
  .file-name {
    text-align: center;
    font-size: 12px;
    line-height: 16px;
  }
  .el-upload-list__item {
    overflow: initial;
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    >div {
      height: 100%;
      width: 100%;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }
  .notShow {
    .el-upload--picture-card {
      display: none;
    }
  }
}
</style>
